<template>
	<div>
		<!-- here is the nav start-->
		<div class="nav-head">
			<router-link to="/layout/own">
				<img class="arrow1" src="../../../assets/icon-return45.png">
			</router-link>
			<div class="title">历史记录</div>
			<img class="arrow2" src="../../../assets/icon-pull45.png" alt="">
		</div>
		<!-- here is the nav end -->

		<!-- 播放全部开始 -->
		<div class="playall">
			<img src="../../../assets/icon-stop@2x45.png" alt="">
			<span>播放全部</span>
		</div>
		<!-- 播放全部结束 -->

		<!-- 音乐列表 start-->
		<ul class="music-list">
			<li>
				<div>
					<span>菊花台</span>
					<img class="mv" src="../../../assets/mv_logo.png" alt="">
				</div>
				<p>周杰伦-我很忙</p>
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li>
			<li>
				<div>
					<span>最长的电影</span>
					<img class="mv" src="../../../assets/mv_logo.png" alt="">
				</div>
				<p>周杰伦-我很忙</p>
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li>
			<li>
				<div>
					<span>晴天</span>
					<img class="mv" src="../../../assets/mv_logo.png" alt="">
				</div>
				<p>周杰伦-我很忙</p>
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li>
			<li>
				<div>
					<span>东风破</span>
					<img class="mv" src="../../../assets/mv_logo.png" alt="">
				</div>
				<p>周杰伦-我很忙</p>
				<img class="point" src="../../../assets/icon-pull@2x32.png" alt="">
			</li>
			
			<!-- the last start-->
			<li class="last">
				<img src="../../../assets/icon-delete.png" alt="">
				<span>清空记录</span>
			</li>
			<!-- the last end -->
		</ul>
		<!-- 调整边距 -->
		<p></p>
		<!-- 音乐列表 end-->

		<!-- 你可能感兴趣的音乐单曲 开始-->
		<div class="interest-title">
			<p class="interest-first">
				<span class="interest-title">你可能感兴趣的音乐单曲</span>
				<img class="interest-close" src="../../../assets/icon-close32.png" alt="">
			</p>
			<!-- 图片和文字浮动开始 -->
			<ul class="interestlist">
				<li>
					<img src="../../../assets/1.png" alt="">
					<div>菊花台</div>
					<p>周杰伦-我很忙</p>
				</li>
				<li class="interest-margin">
					<img src="../../../assets/2.png" alt="">
					<div>菊花台</div>
					<p>周杰伦-我很忙</p>
				</li>
				<li>
					<img src="../../../assets/3.png" alt="">
					<div>菊花台</div>
					<p>周杰伦-我很忙</p>
				</li>
			</ul>
			<!-- 图片和文字浮动结束 -->
			<!-- 清除li标签造成的浮动 -->
			<div class="clear"></div>
			<p class="interest-more">
				寻找更多感兴趣的音乐
				<img class="interes-arrow" src="../../../assets/icon-next20.png" alt="">
			</p>
			<!-- <div class="margin-footer"></div> -->
		</div>
		<!-- 你可能感兴趣的音乐单曲 结束-->
		<!-- <div class="blank"></div> -->
		<!-- <MusicPlayer /> -->
	</div>
</template>
<script>

	import MusicPlayer from "../../../components/music_player.vue"

	export default {
		name:'historyRecord',
		data(){
			return{
				
			}
		},
		components:{
			MusicPlayer
		}
	}
</script>
<style scoped lang="less">
	.blank{
		width: 100%;
		height: 119/100rem;
	}
	.clear{
		clear:both;
	}
	.nav-head{
		width: 100%;
		height: 88/100rem;
		background:url('../../../assets/daohang.png');
		overflow: hidden;
		position: fixed;
		left:0;
		top: 0;
	}
	.nav-head .arrow1{
		display: block;
		width: 27/100rem;
		height: 45/100rem;
		position: absolute;
		left: 20/100rem;
		top: 21.5/100rem;
	}
	.nav-head .title{
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 36/100rem;
		color: #fff;
		line-height: 88/100rem;
	}
	.nav-head .arrow2{
		display: block;
		width: 45/100rem;
		height: 13/100rem;
		position: absolute;
		right: 20/100rem;
		top: 37.5/100rem;
	}
	// 播放全部开始
	.playall{
		width:100%;
		height:95/100rem;
		line-height: 95/100rem;
		background: white;
		border-bottom: 2/100rem solid #333;
		margin-top: 88/100rem;
		img{
			width: 45/100rem;
			height: 45/100rem;
			vertical-align: middle;
			margin-left: 20/100rem;
			margin-right: 35/100rem;
			margin-top: -13/100rem;
		}
		span{
			display: inline-block;
			color:#333;
			font-family: "苹方";
			font-size: 30/100rem;
		}
	}
	.music-list{
		background: white;
		li{
			height: 100/100rem;
			border-bottom: 1/100rem solid #ccc;
			overflow: hidden;
			position: relative;
			div{
				font-size: 24/100rem;
				color:#333;
				margin-top: 22/100rem;
				margin-bottom: 19/100rem;
				margin-left: 20/100rem;

			}
			p{
				font-size: 18/100rem;
				color:#666;
				margin-left: 20/100rem;
			}
			.point{
				position: absolute;
				right: 20/100rem;
				top: 48/100rem;
				width: 33/100rem;
				height: 9/100rem;
			}
			.mv{
				width: 36/100rem;
				height: 17/100rem;

			}
		}
	}
	.music-list .last{
		width: 155/100rem;
		line-height: 100/100rem;
		margin: 0 auto;
		border:none;
		span{
			font-size: 24/100rem;
		}
	}
	.last img{
		width: 26/100rem;
		height: 32/100rem;
		vertical-align: middle;
		margin-right: 20/100rem;
		margin-top: -10/100rem;
	}
	.music-list+p{
		width: 100%;
		height: 20/100rem;
		background: #dbd7df;
	}
	// 播放全部结束
	//你可能感兴趣的音乐单曲 开始
	.interest-title{
		background: white;
	}
	.interest-first{
		padding-left: 20/100rem;
		overflow: hidden;
	}
	.interest-title{
		font-size: 30/100rem;
		padding-top: 33/100rem;
	}
	.interest-close{
		float: right;
		width: 32/100rem;
		height: 32/100rem;
		margin-right: 20/100rem;
	}
	.interestlist{
		height: 344/100rem;
		padding-left: 20/100rem;
		padding-right: 20/100rem;
	}
	.interestlist li{
		float: left;
	}
	.interestlist img{
		width: 210/100rem;
		height: 210/100rem;
		margin-top: 27/100rem;
	}
	.interestlist div{
		font-size: 24/100rem;
		color:#333;
		margin-top: 12/100rem;
		margin-bottom: 20/100rem;
	}
	.interestlist p{
		margin-bottom: 52/100rem;
		font-size: 18/100rem;
		color:#666;
	}
	.interest-margin{
		margin-left: 38/100rem;
		margin-right: 38/100rem;
	}
	.interest-more{
		font-size: 24/100rem;
		margin-left: 250/100rem;
		padding-bottom: 40/100rem;
		background: white;
	}
	.interes-arrow{
		width: 20/100rem;
		height: 20/100rem;
	}
	//你可能感兴趣的音乐单曲 结束
	.margin-footer{
		height: 10/100rem;
		background: #E5E5E5;
	}
</style>